import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { getGroup, getGroupExpenses } from '@/lib/api'
import { ChevronRight, Plus } from 'lucide-react'
import Link from 'next/link'
import { notFound } from 'next/navigation'

export default async function GroupPage({
  params: { groupId },
}: {
  params: { groupId: string }
}) {
  const group = await getGroup(groupId)
  if (!group) notFound()

  const expenses = await getGroupExpenses(groupId)

  return (
    <>
      <Card className="mb-4">
        <div className="flex flex-1">
          <CardHeader className="flex-1">
            <CardTitle>Expenses</CardTitle>
            <CardDescription>
              Here are the expenses that you created for your group.
            </CardDescription>
          </CardHeader>
          <CardHeader>
            <Button asChild size="icon">
              <Link href={`/groups/${groupId}/expenses/create`}>
                <Plus />
              </Link>
            </Button>
          </CardHeader>
        </div>

        <CardContent className="p-0">
          {expenses.length > 0 ? (
            <Table className="">
              <TableHeader>
                <TableRow>
                  <TableHead>Title</TableHead>
                  <TableHead>Paid by</TableHead>
                  <TableHead>Paid for</TableHead>
                  <TableHead className="text-right">Amount</TableHead>
                  <TableHead className="w-0"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {expenses.map((expense) => (
                  <TableRow key={expense.id}>
                    <TableCell>{expense.title}</TableCell>
                    <TableCell>
                      <Badge variant="secondary">
                        {
                          group.participants.find(
                            (p) => p.id === expense.paidById,
                          )?.name
                        }
                      </Badge>
                    </TableCell>
                    <TableCell className="flex flex-wrap gap-1">
                      {expense.paidFor.map((paidFor, index) => (
                        <Badge variant="secondary" key={index}>
                          {
                            group.participants.find(
                              (p) => p.id === paidFor.participantId,
                            )?.name
                          }
                        </Badge>
                      ))}
                    </TableCell>
                    <TableCell className="text-right tabular-nums whitespace-nowrap">
                      {group.currency} {expense.amount.toFixed(2)}
                    </TableCell>
                    <TableCell>
                      <Button
                        size="icon"
                        variant="link"
                        className="-my-2"
                        asChild
                      >
                        <Link
                          href={`/groups/${groupId}/expenses/${expense.id}/edit`}
                        >
                          <ChevronRight className="w-4 h-4" />
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <div className="p-6">Your group doesn’t have any expense yet.</div>
          )}
        </CardContent>
      </Card>

      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Participants</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {group.participants.map((participant) => (
              <li key={participant.id}>{participant.name}</li>
            ))}
          </ul>
        </CardContent>
      </Card>
      <SaveGroupLocally group={{ id: group.id, name: group.name }} />
    </>
  )
}